<template>
  <chart :autoresize='true' :options='options'>
  </chart>
</template>

<script>
    export default {
        props: {
            borderRadius: {
                type: Array | String,
                default: ""
            },
            series0Data: {type: Array, default:()=>[]},
            series1Data: {type: Array, default:()=>[]},
            series2Data: {type: Array, default:()=>[]}
        },
        data() {
            return {};
        },
        computed: {
            options() {
                return {
                    backgroundColor: "transparent",
                    textStyle: {
                        fontSize: 12,
                        fontFamily: "PingFang",
                        fontWeight: 500,
                        color: "#ffffff"
                    },

                    "tooltip": {
                        "trigger": "axis",
                        "axisPointer": {
                            "type": "none",
                            textStyle: {
                                color: "#fff",
                                fontSize: 12,
                                padding: 5
                            }

                        },
                        backgroundColor: "rgba(0,123,255,0.4)"
                    },
                    grid: {
                        left: "5%",
                        right: "5%",
                        bottom: "5%",
                        top: "25%",
                        padding: "0 20 0 0",
                        containLabel: true
                    },
                    legend: {
                        selectedMode: false, //取消图例上的点击事件
                        top: 1,
                        textStyle: {
                            color: [],
                            fontSize: 14
                        },
                        icon: "circle",
                        itemWidth: 12,
                        itemHeight: 10,
                        // itemGap: 35
                        color: "#242424"
                    },
                    "xAxis": [
                        {
                            "type": "category",
                            dimensions: ["date"],
                            "axisLine": {
                                lineStyle: {
                                    color: "rgba(0,123,255,.5)",
                                    width: 1
                                }
                            },
                            "splitLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": false
                            },
                            "splitArea": {
                                "show": false
                            },
                            "axisLabel": {
                                color: "rgba(255,255,255,0.7)"
                            },
                            data: ["第一周", "第二周", "第三周", "第四周"]
                        }
                    ],
                    "yAxis": [
                        {
                            "type": "value",
                            "splitLine": {
                                "show": false
                            },
                            "axisLine": {
                                lineStyle: {
                                    color: "rgba(0,123,255,.5)",
                                    width: 1
                                }
                            },
                            "axisTick": {
                                "show": false
                            },
                            "axisLabel": {
                                "interval": 0,
                                color: "rgba(255,255,255,0.5)",
                                align: "left",
                                margin: 20,
                                inside: false

                            },
                            "splitArea": {
                                "show": false
                            },
                            scale:false,
                            minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。

                        }
                    ],
                    "series": [
                        {
                            "name": "检查",
                            "type": "bar",
                            showSymbol: false,
                            barCategoryGap: "40%",
                            "itemStyle": {
                                "normal": {
                                    "color": "rgba(69,182,166,0.59)",
                                    borderWidth: 1,
                                    borderColor: "rgba(69,182,166,1)",
                                    barBorderRadius: this.borderRadius
                                }
                            },
                            data: this.series0Data
                        }, {
                            "name": "约谈",
                            "type": "bar",
                            showSymbol: false,
                            "itemStyle": {
                                "normal": {
                                    "color": "rgba(19,114,255,0.56)",
                                    borderWidth: 1,
                                    borderColor: "rgba(19,114,255,1)",
                                    barBorderRadius: this.borderRadius

                                }
                            },
                            data: this.series1Data
                        }, {
                            "name": "执法",
                            "type": "bar",
                            showSymbol: false,
                            "itemStyle": {
                                "normal": {
                                    "color": "rgba(234,71,71,0.52)",
                                    borderWidth: 1,
                                    borderColor: "rgba(234,71,71,1)",
                                    barBorderRadius: this.borderRadius

                                }
                            },
                            data: this.series2Data
                        }

                    ]
                };
            }
        }
    };
</script>